<template>
    <!--用户信息-->
    <div id="projectForm" class="ww">
        <!--顶部图片-->
        <a href="javascript:void(0);" class="top-img">
            <img src="./images/form-top.png" alt="">
        </a>
        <!--抽奖-->
        <div class="prize">
            <a href="javascript:void(0);">
                <img src="./images/draw.png" alt="">
            </a>
        </div>
        <!--表单-->
        <div class="pdForm">
            <el-form ref="userForm" :model="userform" label-width="80px" :rules="userRules">
                <el-form-item label="姓名">
                    <el-input v-model="userform.name"></el-input>
                </el-form-item>
                <el-form-item label="" class="gender">
                    <el-radio-group v-model="userform.gender">
                        <el-radio :label="0">先生</el-radio>
                        <el-radio :label="1">女士</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="userform.phone"></el-input>
                </el-form-item>
                <el-form-item label="联系地址">
                    <el-input v-model="userform.address"></el-input>
                </el-form-item>
                <el-form-item label="留言信息">
                    <el-input type="textarea" v-model="userform.msg"></el-input>
                </el-form-item>
                <el-form-item label="是否自愿咨询其他项目：" class="msg">
                    <el-radio-group v-model="userform.desire">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="submitUserForm('userForm')">提交留言</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--快速留言-->
        <div class="quickMsg">
            <h1>参考留言</h1>
            <ul class="msg-box" @click="quickToMsg">
                <li>想了解辣么棒加盟流程，请与我联系</li>
                <li>有哪些扶持政策吗？</li>
                <li>合作费用是多少？</li>
                <li>可以实地考察吗？</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            // 验证手机号的方法
            const checkPhone = (rule, value, callback) => {
                console.log(value)
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {

                // 用户信息表单
                userform: {
                    name: "",
                    gender: "",
                    phone: "",
                    address: "",
                    msg: "",
                    desire: ""
                },

                // 用户表单验证
                userRules: {
                    phone: [
                        {validator: checkPhone, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            // 用户表单提交
            submitUserForm(formName) {
                console.log(this.userform)
                this.$refs[formName].validate((valid) => {
                    // console.log(valid)
                    if (valid) {
                        alert('submit!');
                        // 提交成功后清空表单
                        for (let key in this.userform) {
                            this.userform[key] = ""
                        }
                        console.log(this.userform)
                    } else {
                        alert('error submit!!');
                        return false;
                    }
                })
            },
            // 快捷留言
            quickToMsg(e) {
                this.userform.msg = e.target.innerHTML
            }
        },
    }
</script>

<style lang="less">
    /* 用户信息 */

    #projectForm {
        width: 1202px;
        height: 646px;
        background-color: #ffffff;
        border: solid 1px #e83b38;
        position: relative;

        /* 顶图 */
        .top-img {
            img {
                display: block;
                width: 100%;
            }
        }

        /* 抽奖 */
        .prize{
            width: 324px;
            height: 370px;
            position: absolute;
            left: 45px;
            top: 103px;
            a{
                display: block;
                width: 100%;
                img{
                    display: block;
                    width: 100%;
                }
            }
        }
        /* 用户表单 */

        .pdForm {
            width: 330px;
            margin-top: 19px;
            position: absolute;
            left: 440px;
            top: 120px;

            .el-form-item__label {
                text-align: center !important;
            }

            .msg {
                .el-form-item__label {
                    width: 166px !important;
                }
            }

            .el-input__inner {
                height: 30px;
                width: 179px;
            }


            .gender {
                .el-form-item__content {
                    margin-left: 0 !important;
                }
            }

            .el-textarea__inner {
                width: 179px;
                max-height: 98px !important;
                min-height: 98px !important;
                color: #1e2629;
            }

            .el-input__inner {
                color: #1e2629;
            }

            .el-button.el-button--danger {
                position: absolute;
                background-color: #f32222;
            }

        }

        /* 快速留言 */
        .quickMsg{
            background-color: #ffffff;
            border-radius: 10px;
            border: solid 1px #ff9c4c;
            position: absolute;
            right: 100px;
            top: 230px;
            overflow: hidden;
            padding-bottom: 21px;
            h1{
                display: block;
                height: 46px;
                background-color: #ff9833;
                text-align: center;
                font-size: 20px;
                color: #fff;
                line-height: 46px;
            }
            .msg-box{
                padding-left: 26px;
                padding-right: 26px;
                li{
                    border-bottom: 1px solid #d2d2d2;
                    padding-top: 14px;
                    padding-bottom: 14px;
                    font-size: 14px;
                    color: #666;
                    cursor: pointer;
                }
            }
        }
    }
</style>
